<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="styles.css?vary={VERSION}" media="screen">
    <link rel="stylesheet" href="styles-user.css?vary={VERSION}" media="screen">
    <title>{TITLE}</title>
    <meta name="description" content="{CLEAN_DESCRIPTION}" />
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="content_box">
        <h1>{TITLE}</h1>
        <h4>{DESCRIPTION}</h4>
        <noscript>This page requires JavaScript to work. Don't worry, it's all local to the current page, and open source on GitHub.</noscript>
        <hr>
        <div class="top_nav_bar" id="top_nav_bar">
            <div class="accordion navigation_accordion" id="navigation_accordion">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="navigation_accordion_heading">
                        <button class="accordion-button" type="button" id="toggle_nav_button" data-bs-toggle="collapse" data-bs-target="#navigation_accordion_collapse" aria-expanded="true" aria-controls="navigation_accordion_collapse">Navigation</button>
                    </h2>
                    <div id="navigation_accordion_collapse" class="accordion-collapse collapse show" aria-labelledby="navigation_accordion_heading" data-bs-parent="navigation_accordion">
                        <div class="accordion-body">
                            <div>
                                <div class="accordion advanced_settings_section" id="settings_accordion">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="setting_accordion_heading">
                                            <button class="accordion-button collapsed" id="toggle_adv_button" type="button" data-bs-toggle="collapse" data-bs-target="#settings_accordion_collapse" aria-expanded="false" aria-controls="settings_accordion_collapse">Advanced Settings</button>
                                        </h2>
                                        <div id="settings_accordion_collapse" class="accordion-collapse collapse" aria-labelledby="setting_accordion_heading" data-bs-parent="#settings_accordion">
                                            <div class="accordion-body">
                                                {ADVANCED_SETTINGS}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            {CONTENT}
                            <center>
                                <input class="form-check-input" type="checkbox" id="showDescriptions" checked="true" autocomplete="off" onchange="javascript:toggleDescriptions()"> <label class="form-check-label" for="showDescriptions" title="Uncheck this to focus on the grid. Check it to see the full descriptions of each option.">Show descriptions of axes and values</label>
                                &emsp;&emsp;<input class="form-check-input" type="checkbox" autocomplete="off" value="" id="autoScaleImages"> <label class="form-check-label" for="autoScaleImages">Auto-scale images to viewport width</label>
                                &emsp;&emsp;<input class="form-check-input" type="checkbox" autocomplete="off" value="" id="stickyNavigation"> <label class="form-check-label" for="stickyNavigation">Sticky navigation</label>
                                &emsp;&emsp;<input class="form-check-input" type="checkbox" autocomplete="off" checked id="stickyLabels"> <label class="form-check-label" for="stickyLabels">Sticky labels</label>
                                &emsp;&emsp;<span id="score_setting">Score Display: <select id="score_display"><option>None</option><option>Thin Outline</option><option>Thick Bars</option><option>Heatmap</option></select></span>
                                &emsp;&emsp;<span title="This only applies to video files (mp4, webm, mov) and does not apply to 'animated images' (gif, webp)"><input class="form-check-input" type="checkbox" autocomplete="off" id="pauseVideos"> <label class="form-check-label" for="pauseVideos">Pause Videos</label></span>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
            <div id="save_image_helper" class="save_image_area">
                <button onclick="makeImage()">Save Image Of Current View</button> <select title="Image Type" id="makeimage_type"><option>jpeg</option><option>png</option></select> <select title="Image Size" id="makeimage_size"><option selected>1x</option><option>0.75x</option><option>0.5x</option><option>0.25x</option></select>
                &emsp;<button onclick="makeGif()">Create Axis GIF Animation</button> <select title="Axis" id="makegif_axis"><option value="x-axis">X Axis</option></select> <select title="GIF Size" id="makegif_size"><option>1x</option><option>0.75x</option><option selected>0.5x</option><option>0.25x</option></select> <select title="GIF Speed" id="makegif_speed"><option>1/s</option><option>2/s</option><option>3/s</option><option selected>4/s</option><option>5/s</option><option>10/s</option></select><select title="GIF Direction" id="makegif_direction"><option>Forwards</option><option>Backwards</option></select>
                <div id="save_image_info" style="display: none;">Here's your image! To share it, just use right click -> Copy image or Save Image As</div>
            </div>
        </div>
        <div class="image_table_box">
            <table class="image_table" id="image_table"></table>
            <table id="image_script_dump"></table>
        </div>
    </div>
    <div class="modal modal-fullscreen popup_modal_background" id="image_info_modal"></div>
    <div class="modal" tabindex="-1" id="save_image_output_modal">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Here's your image!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>To share it, just use right click -> Copy image or Save Image As.</p>
                    <div id="save_image_output" class="save_image_output"></div>
                </div>
            </div>
        </div>
    </div>
    <br><div style="width:256px;height:512px;"></div> <!-- Spacer to reduce screen-jumping if images load while you're scrolled down -->
    <footer>
        <center>
            <hr>
            Created by: {AUTHOR}
            <br>The technology that powers this page is <a href="https://github.com/mcmonkeyprojects/SwarmUI">SwarmUI</a>, published under the MIT license by Alex 'mcmonkey' Goodwin.
            <br>This software allows users to generate pages with any content they desire. Therefore, content on this page (images, text, etc.) is the property of whoever generated this specific page.
            <br>You can support development of cool tools like this on <a href="https://www.patreon.com/swarmui">The SwarmUI Patreon</a>.
            <br>{EXTRA_FOOTER}
            <br>Made using the <a href="https://bootswatch.com/darkly/">Darkly Bootstrap Theme</a> by Thomas Park, which was released under the <a href="https://github.com/thomaspark/bootswatch/blob/95df99d76147797cbcb1014b639805add2327f65/LICENSE">MIT License</a>.
            <br>Gifs are generated using <a href="https://github.com/antimatter15/jsgif">JSGif</a>, which was released under the <a href="https://github.com/antimatter15/jsgif/blob/b46429c50a53d23b762d6ebb00b375aece3ed843/LICENSE">MIT License</a>.
            <br>
            <br><div style="width:256px;height:512px;"></div>
        </center>
    </footer>
    <script src="bootstrap.bundle.min.js"></script>
    <script src="jsgif.js"></script>
    <script src="data.js?vary={VERSION}"></script>
    <script src="proc.js?vary={VERSION}"></script>
</body>
